<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card class="tree-card">
        <!-- 放置解构内容 -->
        <TreeTools :tree-node="company" :is-root="true"></TreeTools>
        <!-- 放置一个el-tree -->
        <el-tree
          :data="departs"
          :props="defaultProps"
          :default-expand-all="true"
        >
          <TreeTools
            slot-scope="{ data }"
            :tree-node="data"
            @delDepts="getDepartments"
            @addDepts="addDepts"
            @editDepts="editDepts"
          ></TreeTools>
          <!-- 传入插槽内容, 会循环多次, 有多少节点就循环多少次 -->
          <!-- 作用域插槽 slot-scope="obj" 接收传递给插槽的数据  node 节点的node对象  data是每个节点的数据对象-->
          <!-- <el-row slot-scope="{ data }" type="flex" justify="space-between" align="middle" style="height: 40px; width: 100%">
            <el-col>
              左侧内容
              <span>{{ data.name }}</span>
            </el-col>
            <el-col :span="4">
              <el-row type="flex" justify="end">
                <el-col>{{ data.manager }}</el-col>
                <el-col>
                  放置下拉菜单
                  <el-dropdown>
                    内容
                    <span>操作
                      <i class="el-icon-arrow-down" />
                    </span>
                    具名插槽
                    <el-dropdown-menu slot="dropdown">
                      下拉选项
                      <el-dropdown-item>添加子部门</el-dropdown-item>
                      <el-dropdown-item>编辑部门</el-dropdown-item>
                      <el-dropdown-item>删除部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-col>
              </el-row>

            右侧内容
            </el-col>
          </el-row> -->
        </el-tree>
      </el-card>
      <!-- 放置新增弹层 -->
      <AddDept
        ref="addDept"
        :showDialog.sync="showDialog"
        :treeNode="node"
        @addDepts="getDepartments"
      ></AddDept>
    </div>
  </div>
</template>

<script>
import TreeTools from "./components/tree-tools.vue";
import { getDepartments } from "@/api/departments.js";
import { tranListToTreeData } from "@/utils/index.js"; // 引入获得树形结构封装好的递归算法函数
import AddDept from "./components/add-dept"; // 引入新增部门组件
export default {
  components: {
    TreeTools: TreeTools,
    AddDept: AddDept,
  },
  data() {
    return {
      company: {}, // 头部数据结构
      departs: [], // 内容数据结构
      defaultProps: {
        label: "name", // 表示 从这个属性显示内容, 默认为label
        // children: 'children', // 从这个属性去找子节点, 默认为children
      },
      showDialog: false, // 是否显示新增部门窗口
      node: null,
    };
  },
  created() {
    this.getDepartments(); // 调用自身的方法
  },
  methods: {
    async getDepartments() {
      const result = await getDepartments();
      this.company = { name: result.companyName, manager: "负责人", id: "" };
      // 这里定义一个空串  因为 它是根 所有的子节点的数据pid 都是 ""
      this.departs = tranListToTreeData(result.depts, ""); // 需要将其转化成树形结构
    },
    addDepts(node) {
      this.showDialog = true; // 显示弹层
      // 因为node是当前的点击的部门， 此时这个部门应该记录下来,
      this.node = node;
    },
    // 编辑部门节点
    editDepts(node) {
      this.showDialog = true // 显示新增组件弹层
      this.node = node // 存储传递过来的node数据
      // 父组件 调用子组件的方法
      this.$refs.addDept.getDepartDetail(node.id) // 直接调用子组件中的方法 传入一个id
    }
  },
};
</script>

<style scoped>
.tree-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
